import React, { useState } from 'react'
import { Table, Tooltip, Space, Button, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';


import {updateqianuser} from '../../../../request/api'

export default function To_be_reviewed(props) {
    const { afterdata, getid, getall } = props

    const [model_type, setmodel_type] = useState(false)
    const updatmodel_type = (item: boolean) => {
        setmodel_type(item)
    }

    const Updateqianuser=async(item,type)=>{
        // console.log(item,type);
        let from = {
            _id: item,
            type: type
        }
        const res = await updateqianuser(from)
        if(res.code==200){
            getall(res.code)
        }
    }

    type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
    const columns: TableColumnsType = [
        { title: '用户id', dataIndex: 'key' },
        { title: '注册时间', dataIndex: 'Time_of_registration' },
        { title: '昵称', dataIndex: 'nickname' },
        { title: '手机号', dataIndex: 'phone' },
        { title: '性别', dataIndex: 'sex' },
        { title: '地区', dataIndex: 'region' },
        { title: '消费金额', dataIndex: 'The_amount_spent' },
        { title: '消费订单', dataIndex: 'order_list' },
        { title: '状态', dataIndex: 'user_type' },
        {
            title: '操作',
            key: '_id',
            render: (_, record) => (
                <Space size="middle">
                    <a >查看 </a>
                    <a  onClick={()=>{
                        Updateqianuser(record.key,record.user_type)
                    }}>{record.user_type === '有效' ? '无效' : '有效'}</a>
                </Space>
            ),
        },
    ];




    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    // 数据渲染
    const dataSource = afterdata.map((item) => ({
        key: item._id,
        Time_of_registration: item.Time_of_registration,
        nickname: item.nickname,
        phone: item.phone,
        sex: item.sex,
        region: item.region,
        The_amount_spent:item.The_amount_spent,
        order_list: item.order_list.length,
        user_type: item.user_type==true?'有效':'无效'
    }));


    // 选择项
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
        getid(newSelectedRowKeys)
    };
    const rowSelection: TableRowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;




    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };



    // 获取详细数据售后数据
    const [after_data, setafter_data] = useState<any>({})
    const Getafterdetail = async () => {
        setmodel_type(true)
        const res = await getafterdetail({ _id: String(selectedRowKeys[0]) })
        setafter_data(res.data)
    }




    return (
        <div>
            <Flex gap="middle" vertical>
                <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
            </Flex>
        </div>
    )
}
